<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layout.css">
    <link rel="stylesheet" href="sidebar.css">
    <link rel="stylesheet" href="input.css">
    <link rel="stylesheet" href="talkarea.css">
    <!-- 核心的JS库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
    <!-- 代码高亮的样式 -->
    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-dark.min.css" rel="stylesheet" />

    <script type="module" src="https://cdn.jsdelivr.net/npm/webzen-ui/src/component/wz-button/index.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>
    <div class="app">
        <div class="sidebar">
            <div class="sidebar_container">
                <div class="sidebar_container_header">
                    <div class="sidebar_container_logo">
                        <!-- <img lass="sidebar_container_logo_image" src="/favicon.ico" alt=""> -->
                        <div>
                            <i class="fa fa-flask"></i>

                            <span class="sidebar_container_logo_text">
                                Ai 助手
                                <!-- 研究院Ai 助手 -->
                            </span>

                        </div>
                    </div>

                </div>
                <div class="sidebar_container_search">
                    <input placeholder="搜索你的对话" type="text" class="sidebar_input">

                    <span style="cursor: pointer;font-size:1.5rem">+</span>
                </div>


                <div class="sidebar_container_list">
                    <div class="sidebar_container_list_item">
                        <div class="list_item_image">
                            <img class="list_item_image_" src="/react.jpg" alt="">
                        </div>
                        <div class="list_item_textarea">
                            <div class="list_item_textarea_title">
                                标题
                            </div>
                            <div class="list_item_textarea_info ">
                                <span>你的强大助手</span>
                                <span>2023/06/24</span>
                            </div>
                        </div>


                    </div>


                </div>
                <div class="sidebar_button">

                    <div class="sidebar_button_left">
                        <i class="fa fa-envelope-o"></i>
                        <i class="fa fa-github"></i>
                    </div>
                    <div class="sidebar_button_right">
                        <i class="fa fa-instagram"></i>
                    </div>

                </div>
            </div>

        </div>
        <style>

        </style>
        <div class="talkarea">
            <div class="talkarea_header">
                <div class="talkarea_header_icon">
                    <i class="fa fa-reorder"></i>
                </div>
                <div class="talkarea_header_title">
                    标题
                </div>
            </div>
            <div class="talkarea_container">
                <div class="talkarea_container_side left_layout">
                    <div class="talkarea_container_side_img">
                        <img src="/favicon.ico" alt="" style="border-radius: 100px">
                    </div>
                    <div class="talkarea_container_side_text font_container_color">
                        <pre><code class="language-html" id="html_template_code"> <div style="display: none;" id="html_template">

                        </div></code>
                        </pre>

                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                        你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233 你好233
                    </div>
                </div>
                <div class="talkarea_container_side right_layout">
                    <div class="talkarea_container_side_img">
                        <img src="/favicon.ico" alt="" style="width: 100%;height:100%;border-radius: 100px">
                    </div>
                    <div class="talkarea_container_side_text font_container_color">
                        你好
                    </div>

                </div>
                <div class="talkarea_container_side right_layout">
                    <div class="talkarea_container_side_img">
                        <img src="/favicon.ico" alt="" style="width: 100%;height:100%;border-radius: 100px">
                    </div>
                    <div class="talkarea_container_side_text font_container_color">
                        <img src="/react.jpg" alt="">
                    </div>

                </div>

            </div>
            <!-- 输入框 -->
            <div class="talkarea_input">
                <div class="talkarea_input_button">
                    <i class="fa fa-file-picture-o"></i>
                    <i class="fa fa-folder-open-o"></i>
                    <i class="fa fa-bell-o"></i>
                </div>
                <div class="talkarea_input_textarea">
                    <textarea class="talkarea_input_textarea_item">

                    </textarea>
                    <wz-button type="primary"> <i class="fa fa-send-o"></i>发送</wz-button>
                </div>
            </div>
            <style>
                .talkarea_input_textarea {
                    padding: 0rem 0rem;
                    height: 100%;
                    width: 98%;
                    margin: 0 auto;
                    position: relative;
                }

                .talkarea_input_textarea_item {
                    text-indent: 2%;
                    height: 100%;
                    width: 100%;
                    background: rgb(240, 240, 255);
                    border: 0px solid #eee;
                    border-radius: 0.5rem;
                    /* text-align: center; */
                    font-size: 1rem;
                    outline: none
                }


                .talkarea_input_textarea_item:focus {
                    border: 0.1rem solid rgba(0, 0, 0, 0.1);
                }


                wz-button {
                    position: absolute;
                    right: 1rem;
                    bottom: 1rem;
                }

                wz-button i {
                    padding: unset;
                    background: unset;
                }
            </style>
        </div>
        <style>

        </style>
</body>


<script>
    // 高亮

    document.querySelector('#html_template_code').innerHTML = `
<div>
    <h1>标签格式化</h1>
    <div>html格式化</div>
</div>`.replace(/</g, '&lt;').replace(/>/g, '&gt;')


    window.onload = function () {
        hljs.highlightAll()
    }

    // 折叠侧边轴事件
    let isCollpse = false
    document.querySelector(".talkarea_header_icon").addEventListener("click", () => {
        if (isCollpse) {
            isCollpse = !isCollpse
            document.querySelector(".sidebar").style.display = "flex"
        } else {
            isCollpse = !isCollpse
            document.querySelector(".sidebar").style.display = "none"
        }

    })
    document.querySelector("wz-button").addEventListener("click", () => {
        let text = document.querySelector(".talkarea_input_textarea_item").value
        let node = document.createElement("div")
        node.setAttribute("class", "talkarea_container_side left_layout")
        let template = `
       
                    <div class="talkarea_container_side_img">
                        <img src="/favicon.ico" alt="" style="border-radius: 100px">
                    </div>
                    <div class="talkarea_container_side_text font_container_color">
                       ${text}
                    </div>
   
        `
        node.innerHTML = template
        document.querySelector(".talkarea_container").appendChild(node)
        document.querySelector(".talkarea_input_textarea_item").value = ""

        // 滚动到最下面
        const domWrapper = document.querySelector('.talkarea_container'); // 外层容器 出现滚动条的dom
        domWrapper.scroll(0, document.querySelector('.talkarea_container').scrollHeight);
    })

        // console.log(document.querySelector('#html_template').innerText)
        // 自适应
        (function (doc, win) {
            var docEI = doc.documentElement,
                resizeEvt = "orientationchange" in window ? "orientataionchange" : "resize",
                recalc = function () {
                    var clientWidth = docEI.clientWidth;
                    if (!clientWidth) return;
                    //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
                    docEI.style.fontSize = 12 * (clientWidth / 1536) + "px";
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener("DOMContentLoaded", recalc, false);
        })(document, window);
</script>

</html>